<template>
	<view>
		<!--基础信息-->
		<view style="height:20upx;"></view>

		<block v-if="field.length>0">
			<!-- wbg form-box -->
			<view>
				<view class="title wbg row-box">{{mid==83||mid==85?'个人类型':'企业类型'}}</view>
				<u--form :model="form" labelWidth="180upx" labelPosition="left">
					<block v-for="(row,index) in field">
						<view class="row-box wbg">
							<block v-if="row.type=='26'">
								<view class="tip-box">{{row.title}}</view>
								<view class="flex-white-plr26 ptb10 bdb_f5">
									<block v-if="param.details==undefined">
										<textarea v-model="form[row.field]"
											:placeholder="row.placeholder==0?('请输入'+row.title):row.placeholder"
											count></textarea>
									</block>
									<block v-else>
										{{form[row.field]}}
									</block>
								</view>
							</block>
							<block v-else-if="row.type=='4'">
								<!-- <u-form-item :label="row.title" :prop="row.field" borderBottom :ref="'item'+index">
									<u-radio-group v-model="form[row.field]">
										<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, idx) in row.option"
											:key="idx" :label="item.val" :name="item.val">{{item.key}}
										</u-radio>
									</u-radio-group>
								</u-form-item> -->
								<view class="inp-row">
									<view class="inp-title">{{row.title}}</view>
									<view class="inp-content">
										<u-radio-group v-model="form[row.field]">
											<u-radio :customStyle="{marginRight: '16px'}"
												v-for="(item, idx) in row.option" :key="idx" :label="item.val"
												:name="item.val">{{item.key}}
											</u-radio>
										</u-radio-group>
									</view>
								</view>


							</block>
							<!--选择-->
							<block v-else-if="row.type=='2'||row.type=='9'">

								<block v-if="param.details==undefined">
									<!-- 	<u-form-item @click="popupFunc(row,row.type)" :label="row.title" borderBottom
										:ref="'item'+index">
										<view :class="selectLabel(row)=='请选择'?'cBlack':''">
											{{selectLabel(row)}}
										</view>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item> -->

									<view class="inp-row">
										<view class="inp-title">{{row.title}}</view>
										<view class="inp-content my-fr">
											<view @click="popupFunc(row,row.type)"
												:class="selectLabel(row)=='请选择'?'inp-cls-place my-fs xz-box':'my-fs xz-box'">
												{{selectLabel(row)}}
											</view>
										</view>
										<view class="icon-box">
											<u-icon slot="right" name="arrow-right"></u-icon>
										</view>

									</view>
								</block>
								<block v-else>
									<!-- <view class="flex-white-plr26 ptb10 bdb_f5">
										<text class="mr26">
											<text>{{row.title}}</text>
										</text>
										<view :class="selectLabel(row)==''?'cBlack':''">
											{{selectLabel(row)}}
										</view>
									</view> -->
									<u-form-item :label="row.title" borderBottom :ref="'item'+index">
										{{selectLabel(row)}}
									</u-form-item>
								</block>
							</block>
							<!--省市区-->
							<block v-else-if="row.type=='22'">
								<block v-if="param.details==undefined">
									<!-- <u-form-item :label="row.title" borderBottom :ref="'item'+index">
										<view class="selectAddress">
											<picker mode="multiSelector" @click="act_row=row"
												@columnchange="addressColumnchange" @change="addressChange"
												:range="addressListData">
												<view :class="selectLabel(row)=='请选择'?'noneAddress':'haveAddress'">
													{{selectLabel(row)}}</view>

											</picker>

										</view><u-icon slot="right" name="arrow-right"></u-icon>
									
									</u-form-item> -->
									<!-- <u--input disabled disabledColor="#ffffff" :value="form[row.field]"
										:placeholder="'请输入'+row.title" border="none"></u--input>
									<u-icon slot="right" name="arrow-right"></u-icon> -->

									<view class="inp-row">
										<view class="inp-title">{{row.title}}</view>
										<view class="inp-content">
											<picker mode="multiSelector" @click="act_row=row"
												@columnchange="addressColumnchange" @change="addressChange"
												:range="addressListData">
												<view
													:class="selectLabel(row)=='请选择'?'noneAddress my-fs':'haveAddress my-fs'">
													{{selectLabel(row)=='请选择'?('请填写'+row.title):selectLabel(row)}}
												</view>

											</picker>
										</view>
									</view>



								</block>
								<block v-else>

									<!-- 
									<view class="flex-white-plr26 ptb10 bdb_f5">
										<text class="mr26">
											<text>{{row.title}}</text>
										</text>
										<view :class="form[row.field]?'':'cBlack'">
											{{form[row.field]==undefined?'':form[row.field]}}
										</view>
									</view> -->
									<u-form-item :label="row.title" borderBottom :ref="'item'+index">
										{{form[row.field]}}
									</u-form-item>

								</block>
							</block>
							<block v-else-if="row.type=='14'">
								<view :class="row.field+'-text-area row-content-box'">
									<u-form-item :label="row.title" :ref="'item'+index">
										<view v-if="row.field=='onimg'" class="u-page__upload-item">
											<view class="img-left-box">
												<u-upload v-if="param.details==undefined" :fileList="fileList.onimg"
													@afterRead="afterRead" @delete="deletePic" name="onimg" multiple
													:maxCount="1" width="250" height="150">
													<view class="up-box">
														<view class="up-icon-box">
															<u-icon color="#999999" size="40" name="camera"></u-icon>
														</view>
														<view class="text-tip">
															点击上传
														</view>
														<view class="text-bottom">身份证正面</view>

													</view>
												</u-upload>
												<view v-else class="up-box">
													<image class="up-img" :src="form[row.field]"></image>
												</view>
											</view>
											<view class="img-right-box">
												<u-upload v-if="param.details==undefined" :fileList="fileList.underimg"
													@afterRead="afterRead" @delete="deletePic" name="underimg" multiple
													:maxCount="1" width="250" height="150">
													<view class="up-box">
														<view class="up-icon-box">
															<u-icon color="#999999" size="40" name="camera"></u-icon>
														</view>
														<view class="text-tip">
															点击上传
														</view>
														<view class="text-bottom">身份证反面</view>
													</view>
												</u-upload>
												<view v-else class="up-box">
													<image class="up-img" :src="form.underimg"></image>
												</view>
											</view>


										</view>
										<view v-else-if="row.field=='bodyimg'" class="u-page__upload-item">
											<view class="img-mid-box">
												<u-upload :fileList="fileList[row.field]" @afterRead="afterRead"
													@delete="deletePic" :name="row.field" multiple :maxCount="1"
													width="250" height="150">
													<view class="up-box" style="min-height:200upx;">
														<view class="up-icon-box">
															<u-icon color="#999999" size="40" name="camera"></u-icon>
														</view>
														<view class="text-tip">
															点击上传
														</view>


													</view>
												</u-upload>
											</view>



										</view>
										<view v-else>
											<view v-if="param.details==undefined" class="u-page__upload-item">
												<u-upload :fileList="fileList[row.field]" @afterRead="afterRead"
													@delete="deletePic" :name="row.field" multiple :maxCount="10"
													:previewFullImage="true"></u-upload>
											</view>
											<block v-else>
												<view style="width:100%;">

													<block v-for="(item,index) in form[row.field]">
														<view class="demo-layout-box">
															<image mode="aspectFit" class="lay-img" :src="item.url">
															</image>
														</view>
													</block>


												</view>
											</block>
										</view>
									</u-form-item>
								</view>
							</block>
							<block v-else-if="row.type=='8'">
								<view :class="row.field+'-text-area row-content-box'">
									<u-form-item :label="row.title" :ref="'item'+index">
										<u--textarea :placeholder="row.placeholder==0?('请输入'+row.title):row.placeholder"
											border="none" v-model="form[row.field]"></u--textarea>
									</u-form-item>
								</view>
							</block>
							<block v-else>
								<!-- <u-form-item :label="row.title" borderBottom :ref="'item'+index">
									<u--input v-if="param.details==undefined"  v-model="form[row.field]" :placeholder="row.placeholder==0?('请输入'+row.title):row.placeholder"
										border="none"></u--input>
										<view v-else>{{form[row.field]}}</view>
								</u-form-item> -->
								<view class="inp-row">
									<view class="inp-title">{{row.title}}</view>
									<view class="inp-content">
										<input class="inp-cls" placeholder-class="inp-cls-place"
											v-model="form[row.field]"
											:placeholder="row.placeholder==0?('请输入'+row.title):row.placeholder"></input>
									</view>
								</view>

							</block>
						</view>
						<view :class="row.field+'-line'"></view>
					</block>
				</u--form>
			</view>

			<u-datetime-picker :show="showTime" v-model="act_row.oval" mode="datetime" closeOnClickOverlay
				@confirm="com" @cancel="showTime=false" @close="showTime=false"></u-datetime-picker>
			<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" :mode="popupData.mode" :show="popupShow"
				:round="popupData.round" :overlay="popupData.overlay" :borderRadius="popupData.borderRadius"
				:closeable="popupData.closeable" :closeOnClickOverlay="popupData.closeOnClickOverlay"
				@close="popupShow=false">

				<view class="popup-title-box">选择{{act_row.title}}</view>
				<view class="u-demo-block">
					<view class="popup-box">
						<view class="u-page__radio-item">
							<u-radio-group v-model="act_row.oval" :borderBottom="true" placement="column"
								iconPlacement="right">
								<u-radio :customStyle="{marginBottom: '16px'}" v-for="(item, index) in act_row.option"
									:key="index" :label="item.val" :name="item.val">{{item.key}}
								</u-radio>
							</u-radio-group>
						</view>
						<view class="h_100"></view>
						<view class="my-bnt" @click="com">确定</view>
					</view>

				</view>


			</u-popup>
			<!-- <tn-date-picker :beforeDateDisable="false" color="rgb(230,86,86)" :show="showPicker" :format="'yyyy-mm-dd'"
				:monthNum="6" :value="act_row.oval" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" @confirm="ed"
				@cancel="ed" /> -->

			<view v-if="param.details==undefined" class="submitView">
				<u-button type="primary" class="submitBtn" :ripple="true" ripple-bg-color="#909399"
					@click="submitBtn">提交</u-button>
			</view>


		</block>

	</view>
</template>

<script>
	import TnDatePicker from "@/components/tn-datepicker/tn-datepicker.vue";
	import chinaAddress from "./citydata";
	export default {
		name: "pub-add",
		components: {
			TnDatePicker,
		},
		props: {
			mid: {
				type: Number,
				default: 50
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				form: {},
				field: [],
				idx: [0],
				act_row: {},
				selectList: [],
				cont_name: "",
				pickerShow: false,
				pickerParams: {
					province: true,
					city: true,
					area: true
				},
				selectShow: false,
				popupShow: false,
				showTime: false,
				showPicker: false,
				popupData: {
					overlay: true,
					mode: 'bottom',
					round: 10,
					borderRadius: '20upx',
					closeable: true,
					closeOnClickOverlay: true
				},
				fileList: {
					order_jetimg: [],
					onimg: [],
					underimg: [],
					bodyimg: []
				},
				chinaAddress: [], // 全国省市区
				addressListData: [], // 全国省市区
				addressSelectListData: [0, 0, 0], // 当前选择的省市区 index
				param: {}
			}
		},
		mounted() {
			this.chinaAddress = chinaAddress;
			this.getProvince();
		},
		created() {
			var that = this;
			setTimeout(function() {
				that.getField();
			}, 100);


		},
		methods: {
			// 获取全国省份list
			getProvince() {
				const chinaAddress = this.chinaAddress;
				const provinceListData = [];
				for (const province_key in chinaAddress) {
					provinceListData.push(chinaAddress[province_key].label);
				}
				this.addressListData[0] = provinceListData;
				// 默认加载第一个省份的城市
				this.getCity(provinceListData[0]);
			},
			// 根据省份获取城市
			getCity(province) {
				// 获取省份对象
				const chinaAddress = this.chinaAddress;
				const chinaAddress_Item = chinaAddress.find((item) => {
					return item.label === province;
				});
				// 获取城市list
				const cityChildren = chinaAddress_Item.children;
				if (!cityChildren) {
					// 如果省份没有市区 清空上次的市区和区域数据
					this.addressListData[1] = "";
					this.addressListData[2] = "";
					return;
				}
				// 解析城市list
				const cityListData = [];
				for (const city_key in cityChildren) {
					cityListData.push(cityChildren[city_key].label);
				}
				this.addressListData[1] = cityListData;
				// 默认加载第一个省份的第一个城市的区域
				this.getCounty(province, cityListData[0]);
			},
			// 根据省份和城市 获取区域
			getCounty(province, city) {
				// 获取省份对象
				const chinaAddress = this.chinaAddress;
				const chinaAddress_Item = chinaAddress.find((item) => {
					return item.label === province;
				});
				// 获取城市list
				const cityChildren = chinaAddress_Item.children;

				// 根据城市获取区域
				const cityChildren_item = cityChildren.find((item) => {
					return item.label === city;
				});

				// 解析区域list
				const countyListData = [];
				if (cityChildren_item.children) {
					for (const county_key in cityChildren_item.children) {
						countyListData.push(cityChildren_item.children[county_key].label);
					}
				} else {
					countyListData.push(cityChildren_item.label);
				}
				this.addressListData[2] = countyListData;
			},
			// 区域更新
			addressColumnchange(e) {
				const {
					column,
					value
				} = e.detail;
				this.addressSelectListData[column] = value;
				// 当前选择的节点地址
				const selectItem = this.addressListData[column][value];
				if (column === 0) {
					// 根据省份获取城市
					this.getCity(selectItem);
				} else if (column === 1) {
					// 获取当前城市的省份
					const province = this.addressListData[0][this.addressSelectListData[0]];
					// 根据省份和城市获取区域
					if (selectItem) {
						this.getCounty(province, selectItem);
					}
				}
				this.$forceUpdate();
			},
			// 区域确定
			addressChange(e) {
				const {
					value
				} = e.detail;
				// 获取省、市、区
				let province = this.addressListData[0][value[0]] || "";
				let city = this.addressListData[1][value[1]] || "";
				let county = this.addressListData[2][value[2]] || "";

				// 拼接页面显示的地址链接
				const addressListStr = [];
				if (province) {
					addressListStr.push(province);
				}
				if (city) {
					addressListStr.push(city);
				}
				if (county) {
					addressListStr.push(county);
				}
				this.form[this.act_row.field] = addressListStr;
				this.$forceUpdate();
				//this.form[this.act_row] = addressListStr.join("-");

				// 当前选择的地址
				//console.log("省份", province);
				//console.log("城市", city);
				//console.log("区域", county);
			},
			getField() {
				this.$api["get"]("Member/getField", {
					showLoding: 1,
					mid: this.mid
				}).then(res => {
					if (res.status == 200) {
						this.field = res.data.field;
						this.cont_name = res.data.cont_name;

						this.getInfo();
					}
				});
			},
			getInfo() {
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				var param = currentPage.options;
				this.param = param;
				if (param.ids != undefined) {
					this.form.ids = param.ids;
				}
				//console.log(param, "==param===");
				//	var param = location.href.split("=")[1];
				if (param.id != undefined) {
					var id = param.id;
					this.$api["post"](this.cont_name + "/detail", {
						showLoding: 1,
						id: id
					}).then(res => {
						if (res.status == 200) {
							this.form = res.data;
						}
					});
				}

			},
			pickerConfirmFun(e) {
				this.form[this.act_row.field] = e.province.label + "-" + e.city.label + "-" + e.area.label;
				//console.log(e);
			},
			pickerShowFun(row) {
				this.act_row = row;
				this.pickerShow = true;
			},
			setTime() {
				//console.log(this.act_row.oval);
			},
			popupFunc(row, type) {
				this.act_row = row;
				if (type == 9) {
					if (this.act_row.oval == undefined || this.act_row.oval == "") {
						this.act_row.oval = Number(new Date());
						//	this.form[this.act_row.field]=this.$toDateTime(this.act_row.oval);
						//this.$forceUpdate();
					}
					this.showTime = true;
				} else if (type == 10) {
					this.showPicker = true;
				} else {
					this.popupShow = true;
				}

			},
			showSelectFun(row) {
				this.idx = [0];
				this.act_row = row;
				this.selectList = row.option;
				if (this.form[row.field]) {
					for (var i in row.option) {
						if (row.option[i].val == this.form[row.field]) {
							var n = i - 0;
							this.idx = [n];
							break;
						}
					}
				}
				this.selectShow = true;
			},
			com(e) {
				var row = this.act_row;
				// console.log(row,"==row.type===");
				if (row.type == 9) {
					this.form[row.field] = this.$toDateTime(e.value);
					this.$forceUpdate();
					this.showTime = false;
				} else {
					this.form[row.field] = this.act_row.oval;
					this.popupShow = false;
					this.$forceUpdate();
				}


			},
			selectConfirmFun(e) {
				this.form[this.act_row.field] = e[0].value;
			},
			selectLabel(row) {
				var label = "请选择";
				if (row.type == 9) {
					if (this.form[row.field]) {
						var _this = this;
						label = _this.form[row.field];
						// setTimeout(function(){
						// 	label = _this.form[row.field];
						// },3000);
					}
					return label;
				}
				if (row.type == 22) {
					if (this.form[row.field]) {
						label = this.form[row.field].join("-");
					}
					return label;
				}
				if (this.form[row.field] !== '') {
					for (var i in row.option) {
						if (row.option[i].val == this.form[row.field]) {
							label = row.option[i].key;
							break;
						}
					}
				}
				return label;
			},
			// 删除图片
			deletePic(event) {
				this.fileList[event.name].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				if (this.fileList[event.name] == undefined) {
					this.fileList[event.name] = [];
				}
				let fileListLen = this.fileList[event.name].length
				lists.map((item) => {
					this.fileList[event.name].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this.fileList[event.name][fileListLen]
					this.fileList[event.name].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}

			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://x.xzdtwl.com/api/upload/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							'Authorization': uni.getStorageSync('LOGIN_TOKEN_KEY')
						},
						success: (res) => {

							res.data = JSON.parse(res.data);
							console.log(res.data, "===res.data===");
							if (res.data.status == 200) {
								setTimeout(() => {
									resolve(res.data.data)
								}, 1000)
							}

						}
					});
				})
			},
			submitBtn() {
				var bool = false;
				for (var i in this.field) {
					if (this.field[i].is_req == 1) {
						if (!this.form[this.field[i].field]) {
							bool = true;
							this.$toast({
								title: "请输入" + this.field[i].title
							});
							break;
						}


					}
				}
				if (bool) {
					return;
				}
				//fileList
				//console.log(this.fileList, "==this.fileList==")
				for (var i in this.fileList) {
					if (this.fileList[i].length > 0) {
						if (i == "order_jetimg") {
							this.form[i] = this.fileList[i];
						} else {
							this.form[i] = this.fileList[i][0].url;
						}

					}
				}

				var url = this.cont_name + (this.form.id == undefined ? "/add" : "/update");
				this.form.type = this.mid == 83 || this.mid == 85 ? 0 : 1;
				this.$api["post"](url, this.form).then(res => {

					if (res.status == 200) {
						if (this.form.id == undefined) {
							this.form = {};
						}
						this.$toast({
							title: "保存成功"
						})
						var mid = this.mid;
						setTimeout(function() {
							if (mid == 80 || mid == 85) {
								uni.switchTab({
									url: "/pages/user/user"
								});

							} else {
								uni.navigateTo({
									url: "/pages/user/mater"
								})
							}

						}, 1000);
					} else {
						this.$toast({
							title: res.msg
						})
					}
				});

			}
		}
	}
</script>


<style lang="scss" scoped>
	.form-box,
	.row-box {
		padding: 5upx 20upx;
	}

	.noneAddress {
		font-size: 28upx;
		font-weight: 400;
		 color:#86837c;
		//color: #cdcdcd;
	}

	.tip-box {
		background: #fff;
		padding-left: 20upx;
		padding-top: 20upx;
		margin-bottom: 120upx;
	}

	.submitView {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.submitBtn {
		border-radius: 0;
	}

	.title {
		padding: 20upx;
		font-size: 36upx;
	}

	.row-content-box {

		/deep/.u-form-item__body__left,
		/deep/.u-form-item__body__right,
		/deep/.u-form-item__body {
			display: block !important;
			width: 100% !important;
		}

	}

	.onimg-text-area,
	.order_jetimg-text-area,
	.bodyimg-text-area {
		/deep/.u-form-item__body__left {
			padding-bottom: 30upx;
		}
	}

	.u-page__upload-item {
		width: 100%;
		overflow: hidden;

		.img-left-box,
		.img-right-box {
			width: 48%;
			float: left;
			text-align: center;
		}

		.img-mid-box {
			width: 48%;
			margin: 0 auto;
			text-align: center;
		}

		.img-right-box {
			float: right;
		}
	}

	/deep/ .u-upload__wrap {
		width: 100% !important;
		display: block !important;
	}

	.up-box {
		width: 100%;
		min-height: 260upx;
		background: #EFEFEF;
		overflow: hidden;
		border-radius: 8upx;
		position: relative;
		color: #999999;

		.up-img {
			width: 100%;
			height: 260upx;
			border-radius: 8upx;
		}
	}

	.up-icon-box {
		text-align: center;
		width: 100%;
		margin-top: 30upx;

		/deep/ .u-icon--right {
			flex-direction: column !important;
		}
	}

	.order_jetimg-text-area {

		/deep/.u-form-item__body__right__content,
		/deep/.u-form-item__body__right__content__slot {
			display: block !important;
		}
	}

	.text-tip {
		text-align: center;
	}

	.text-bottom {
		position: absolute;
		bottom: 0;
		color: #fff;
		background: #04A0E2;
		width: 100%;
		text-align: center;
		padding: 15upx 0;
	}

	.remark-line {
		height: 20upx;
		background: #F8F8F8;
	}

	.order_jetimg-line {
		height: 80upx;
		width: 100%;
		background: #fff;
	}

	.popup-box {
		width: 90%;
		margin: 20upx auto;

	}

	.popup-title-box {
		text-align: center;
		padding: 30upx 20upx;
	}

	.cBlack {
		color: #afafaf
	}

	.demo-layout-box {
		overflow: hidden;
		width: 25%;
		float: left;
	}

	.lay-img {
		width: 100%;
		height: 160upx;
	}

	.inp-row {
		padding: 31upx 0;
		overflow: hidden;
		border-bottom: 1upx solid #d6d7d9;
		position: relative;

		.inp-title {
			width: 250upx;
			float: left;
			font-size: 29upx;
		}

		//#B9B8B8
		.inp-content {
			float: left;

			.inp-cls {
				font-size: 23upx;
			}

		}

		.icon-box {
			position: absolute;
			right: 11upx;
			top: 32upx;
			width: 11upx;
			height: 20upx;
		}
	}

	.my-fs {
		font-size: 23upx;
	}

	.my-fr {
		float: right !important;
		padding-right: 26upx;
	}
/*
	.inp-cls-place {
		color: #cdcdcd !important;

	}

	::-webkit-input-placeholder {
		color: #cdcdcd !important;
	}

	:-moz-placeholder {
		color: #cdcdcd !important;
	}

	::-moz-placeholder {
		color: #cdcdcd !important;
	}

	:-ms-input-placeholder {
		color: #cdcdcd !important;
	}
*/
	.xz-box {
		text-align: right;
	}
</style>